<script setup>
import { ref } from "vue";
import { createWindow } from "../../utils/ipcRenderer";
const props = defineProps(['playList'])


const handleClick = (id) => {
  createWindow({
    windowName: "songListDetail",
    path: "songListDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>

<template>
  <div class="all_wrap">
    <div v-if="playList.length > 0" class="song_list">
      <div class="created_list">
        <!-- <div class="title">{{ "我" }}创建的歌单（{{ createList.length }}）</div> -->
        <div class="list_wrap">
          <div
            class="item_wrap"
            v-for="(item, index) in playList"
            :key="index"
          >
            <div class="item">
              <div @click="handleClick(item.id)" class="cover">
                <el-image :src="item.coverImgUrl+`${'?param=300y300'}}`" fit="cover"></el-image>
              </div>
              <div class="name">{{ item.name }}</div>
              <div class="song_count">{{ item.trackCount }}首</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.all_wrap {
  .song_list {
    width: 100%;
    .title {
      font-weight: 600;
      margin-bottom: 20px;
      font-size: 20px;
    }
  }

  .created_list {
    .list_wrap {
      flex-wrap: wrap;
      display: grid;
      justify-content: space-around;
      align-content: center;
      grid-template-columns: repeat(auto-fill, 16vw);
      .item_wrap {
        .item {
          position: relative;
          .cover {
            width: 15vw;
            height: 15vw;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.2);
            }
            img {
              transition: 2s;
            }
          }
          .count {
            position: absolute;
            top: 2%;
            right: 6%;
            font-size: 10px;
            color: #fff;
            .iconfont {
              font-size: 14px;
              margin-right: 3px;
            }
          }
          .name {
            width: 200px;
            color: #373737;
            font-size: 14px;
            line-height: 35px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .song_count {
            font-size: 12px;
            color: #9f9f9f;
          }
        }
      }
    }
  }
}
</style>
